<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Git 子模块与子树：多仓库项目管理的艺术</title>
    <link href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            min-height: 100vh;
        }
        
        /* 首字下沉效果 */
        .drop-cap::first-letter {
            float: left;
            font-size: 4.5rem;
            line-height: 3.5rem;
            padding-right: 0.5rem;
            margin-top: 0.5rem;
            font-weight: 700;
            color: #4a5568;
            font-family: 'Noto Serif SC', serif;
        }
        
        /* 代码块美化 */
        pre {
            background: linear-gradient(135deg, #2d3748 0%, #1a202c 100%);
            border-radius: 12px;
            padding: 1.5rem;
            overflow-x: auto;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            position: relative;
        }
        
        pre::before {
            content: '';
            position: absolute;
            top: 10px;
            left: 15px;
            width: 12px;
            height: 12px;
            background: #ff5f56;
            border-radius: 50%;
            box-shadow: 20px 0 0 #ffbd2e, 40px 0 0 #27c93f;
        }
        
        code {
            color: #e2e8f0;
            font-family: 'Fira Code', monospace;
        }
        
        /* 卡片悬停效果 */
        .feature-card {
            transition: all 0.3s ease;
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(10px);
        }
        
        .feature-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
        }
        
        /* 标题装饰 */
        .section-title::before {
            content: '';
            position: absolute;
            left: -30px;
            top: 50%;
            transform: translateY(-50%);
            width: 5px;
            height: 100%;
            background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
            border-radius: 3px;
        }
        
        /* 表格美化 */
        .comparison-table {
            background: white;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        }
        
        .comparison-table th {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            font-weight: 600;
        }
        
        .comparison-table tr:nth-child(even) {
            background: #f7fafc;
        }
        
        /* 动画效果 */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .animate-fadeInUp {
            animation: fadeInUp 0.8s ease-out;
        }
        
        /* Mermaid 图表样式 */
        .mermaid {
            background: white;
            padding: 2rem;
            border-radius: 12px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        }
    </style>
</head>
<body>
    <!-- Hero 区域 -->
    <section class="relative overflow-hidden bg-gradient-to-br from-purple-600 via-pink-500 to-red-500 text-white">
        <div class="absolute inset-0 bg-black opacity-20"></div>
        <div class="relative container mx-auto px-6 py-24">
            <div class="max-w-4xl mx-auto text-center animate-fadeInUp">
                <h1 class="text-5xl md:text-6xl font-bold mb-6 leading-tight">
                    Git 子模块与子树
                </h1>
                <p class="text-xl md:text-2xl mb-8 opacity-90">
                    掌握多仓库项目管理的艺术
                </p>
                <div class="flex justify-center space-x-6 text-lg">
                    <div class="flex items-center">
                        <i class="fas fa-code-branch mr-2"></i>
                        <span>版本控制</span>
                    </div>
                    <div class="flex items-center">
                        <i class="fas fa-layer-group mr-2"></i>
                        <span>模块化管理</span>
                    </div>
                    <div class="flex items-center">
                        <i class="fas fa-users mr-2"></i>
                        <span>团队协作</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="absolute bottom-0 left-0 right-0">
            <svg viewBox="0 0 1440 120" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M0 120L60 110C120 100 240 80 360 70C480 60 600 60 720 65C840 70 960 80 1080 85C1200 90 1320 90 1380 90L1440 90V120H1380C1320 120 1200 120 1080 120C960 120 840 120 720 120C600 120 480 120 360 120C240 120 120 120 60 120H0V120Z" fill="white"/>
            </svg>
        </div>
    </section>

    <!-- 主要内容区域 -->
    <main class="container mx-auto px-6 py-12 max-w-6xl">
        
        <!-- 引言部分 -->
        <section class="mb-16 animate-fadeInUp">
            <div class="bg-white rounded-2xl shadow-xl p-8 md:p-12">
                <p class="text-lg leading-relaxed text-gray-700 drop-cap">
                    在企业级开发或大型项目中，多个团队往往会分别维护不同的代码仓库，而这些仓库之间又可能存在一定的依赖关系。为了更好地管理这些多仓库项目，我们可以利用 Git 提供的<span class="font-bold text-purple-600">子模块（Submodule）</span>和<span class="font-bold text-pink-600">子树（Subtree）</span>机制。这两种方法都能在一个 Git 仓库中嵌套另一个仓库，但它们的原理和使用方式有所不同。
                </p>
            </div>
        </section>

        <!-- 为什么需要 Git 子模块和子树 -->
        <section class="mb-16">
            <h2 class="text-3xl font-bold mb-8 text-gray-800 relative pl-8 section-title">
                <i class="fas fa-question-circle text-purple-500 mr-3"></i>
                为什么需要 Git 子模块和子树？
            </h2>
            
            <div class="grid md:grid-cols-3 gap-6 mb-8">
                <div class="feature-card p-6 rounded-xl border border-gray-200">
                    <div class="text-4xl text-blue-500 mb-4">
                        <i class="fas fa-puzzle-piece"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3 text-gray-800">依赖组件的管理</h3>
                    <p class="text-gray-600">
                        例如，一个 Web 项目可能依赖一个独立开发的 UI 组件库或 SDK，而这些库又需要独立版本管理。
                    </p>
                </div>
                
                <div class="feature-card p-6 rounded-xl border border-gray-200">
                    <div class="text-4xl text-green-500 mb-4">
                        <i class="fas fa-handshake"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3 text-gray-800">跨团队协作</h3>
                    <p class="text-gray-600">
                        不同团队可能分别维护不同的代码库，但在某些情况下，它们需要一起交付或部署。
                    </p>
                </div>
                
                <div class="feature-card p-6 rounded-xl border border-gray-200">
                    <div class="text-4xl text-purple-500 mb-4">
                        <i class="fas fa-cubes"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3 text-gray-800">微服务架构</h3>
                    <p class="text-gray-600">
                        每个微服务可能是一个独立的 Git 仓库，但它们可能共享一些公共代码，如 API 规范或工具库。
                    </p>
                </div>
            </div>
            
            <div class="bg-gradient-to-r from-purple-50 to-pink-50 rounded-xl p-6 border-l-4 border-purple-500">
                <p class="text-gray-700">
                    <i class="fas fa-lightbulb text-purple-500 mr-2"></i>
                    为了避免简单的"复制粘贴"代码，提高版本管理的可控性，我们可以使用 Git 子模块（Submodule）或 Git 子树（Subtree）。
                </p>
            </div>
        </section>

        <!-- Git 子模块部分 -->
        <section class="mb-16">
            <h2 class="text-3xl font-bold mb-8 text-gray-800 relative pl-8 section-title">
                <i class="fas fa-link text-blue-500 mr-3"></i>
                Git 子模块（Submodule）
            </h2>
            
            <div class="bg-white rounded-2xl shadow-xl p-8 mb-8">
                <h3 class="text-2xl font-bold mb-4 text-gray-800">什么是 Git 子模块？</h3>
                <p class="text-lg leading-relaxed text-gray-700 mb-6">
                    Git <span class="font-bold text-blue-600">子模块（Submodule）</span>允许你在一个 Git 仓库（主仓库）中嵌套另一个 Git 仓库（子仓库）。子模块本质上是一个指向外部 Git 仓库的引用，而不是直接存储该仓库的内容。
                </p>
                
                <div class="grid md:grid-cols-3 gap-4">
                    <div class="bg-blue-50 p-4 rounded-lg">
                        <i class="fas fa-code-branch text-blue-500 text-2xl mb-2"></i>
                        <h4 class="font-bold text-gray-800 mb-2">子仓库独立版本管理</h4>
                        <p class="text-sm text-gray-600">子模块本身仍然是一个独立的 Git 仓库，拥有自己的提交历史。</p>
                    </div>
                    <div class="bg-blue-50 p-4 rounded-lg">
                        <i class="fas fa-bookmark text-blue-500 text-2xl mb-2"></i>
                        <h4 class="font-bold text-gray-800 mb-2">主仓库只存子仓库的引用</h4>
                        <p class="text-sm text-gray-600">主仓库不会直接存储子仓库的代码，而是记录子仓库的特定提交 SHA。</p>
                    </div>
                    <div class="bg-blue-50 p-4 rounded-lg">
                        <i class="fas fa-sync-alt text-blue-500 text-2xl mb-2"></i>
                        <h4 class="font-bold text-gray-800 mb-2">需要手动更新</h4>
                        <p class="text-sm text-gray-600">如果子仓库发生了变更，主仓库不会自动获取最新内容，需要手动拉取更新。</p>
                    </div>
                </div>
            </div>
            
            <!-- 子模块操作步骤 -->
            <div class="space-y-6">
                <div class="bg-white rounded-xl shadow-lg p-6">
                    <h4 class="text-xl font-bold mb-4 text-gray-800">
                        <span class="bg-blue-500 text-white rounded-full w-8 h-8 inline-flex items-center justify-center mr-3">1</span>
                        添加子模块
                    </h4>
                    <p class="text-gray-700 mb-4">假设你有一个主仓库 <code class="bg-gray-100 px-2 py-1 rounded">main-repo</code>，你想在其中添加一个 <code class="bg-gray-100 px-2 py-1 rounded">common-lib</code> 仓库作为子模块：</p>
                    <pre><code>git submodule add https://github.com/your-org/common-lib.git libs/common-lib
git commit -m "添加 